<template>
	<view>   <!-- 分类导航模板 -->
		<view class="magic-square">
			<view class="magic-style-one" v-if="magicId==0">
				<view class="nav-icon"
					:class="navIcon==4?'icon0':'icon1'" 
					v-for="(item,index) in magicList" 
					:key="index"
					@click="navToClass(item.itemId)"
				>
					<image class="nav-icon-bg" :src="item.FImgUrl||`http://minipos.posyun3721.com/image/shopImg/c${index+1}.png`"></image>
					<text class="nav-icon-text">{{item.FName}}</text>
				</view>
			</view>
			<view class="magic-style-two" v-else-if="magicId==1">
				<view class="magic-nav-icon left" v-for="(item,index) in magicList" :key="index" v-if="index==0">
					<view class="title-wrap">
						<text class="main-title">{{item.FName}}</text>
						<text class="sub-heading">￥900.00</text>
					</view>
					<image class="material-icon" src="../../static/errorImage.jpg"></image>
				</view>
				<view class="magic-icon" v-for="(item,index) in magicList" :key="index" v-if="index==1">
					<view class="title-wrap">
						<text class="main-title">{{item.FName}}</text>
						<text class="sub-heading">￥1350.00</text>
					</view>
					<image class="material-icon" src="../../static/errorImage.jpg"></image>
				</view>
				<view class="magic-icon icon" v-for="(item,index) in magicList" :key="index" v-if="index==2">
					<view class="title-wrap">
						<text class="main-title">{{item.FName}}</text>
						<text class="sub-heading">￥650.00</text>
					</view>
					<image class="material-icon" src="../../static/errorImage.jpg"></image>
				</view>
			</view>
			<view class="magic-style-three" v-else-if="magicId==2">
				<view class="magic-nav-icon" v-for="(item,index) in magicList" :key="index" v-if="index<4">
					<view class="flex-wrap">
						<image class="material-icon" src="../../static/errorImage.jpg"></image>
						<view class="title-wrap">
							<text class="main-title">{{item.FName}}</text>
							<text class="sub-heading">￥650.00</text>
						</view>
					</view>
				</view>
			</view>
			<view class="magic-style-four" v-else>
				<view class="magic-nav-icon" v-for="(item,index) in magicList" :key="index" v-if="index<3">
					<view class="nav-icon-bg flex-wrap">
						<image class="material-icon" src="../../static/errorImage.jpg"></image>
						<view class="title-wrap">
							<text class="main-title">{{item.FName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'modules',
		props:{
			//分类导航id
			magicId:{
				type: Number,
				default: 0,
			},
			//分类导航列表
			magicList:{
				type: Array,
				default:()=>[]
			}
		},
		data() {
			return {
				navIcon: 4,//模板传参
			};
		},
		onLoad() {
			
		},
		watch:{},//监听
		computed:{},//计算
		methods:{
			navToClass(id){
				this.$emit('navToClass',id);
			},
		},
	}
</script>

<style lang="scss">
	// 分类模块
	.magic-square{
		width: 100%;
		position: relative;
		// 模块1
		.magic-style-two{
			padding: 30upx 30upx 0 30upx;
			overflow: hidden;
			background: #fff;
			
			.magic-nav-icon {
			    box-sizing: border-box;
			    float: left;
			    border: 2upx solid transparent;
			    position: relative;
			    border-radius: 12upx;
			    background-color: #f2f2f2;
			    overflow: hidden;
				    background: url(https://23627504.s61i.faiusr.com/4/AD0I8I2iCxAEGAAgnfqT9QUo57DPlwYw0AI41wI.png) center center / cover no-repeat, rgb(247, 248, 250);
			}
			.left{
				width: 370upx;
				height: 340upx;
				margin-bottom: 30upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.title-wrap{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					width: 100%;
					.main-title{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 14px;
						color: rgb(53, 53, 53);
						width: initial;
						margin: 0 10upx;
					}
					.sub-heading{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 12px;
						color: rgb(50, 133, 255);
						margin-top: 6upx;
						width: initial;
						margin: 0 10upx;
					}
				}
				.material-icon{
					width: 316upx;
					height: 170upx;
					margin: 20upx auto 0;
					text-align: center;
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;
				}
			}
			// .right{
				.icon{
					margin-top: 20upx;
				}
				.magic-icon{
					width: 300upx;
					height: 160upx;
					margin-left: 20upx;
					float: right;
					display: flex;
					justify-content: center;
					align-items: center;
					background: url(https://23627504.s61i.faiusr.com/4/AD0I8I2iCxAEGAAgrvqT9QUo1bjc5gcwzwI4owE.png) center center / cover no-repeat, rgb(255, 255, 255);
					.title-wrap{
						text-align: left;
						flex: 2 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: center;
						// align-items: center;
						margin: 0 0 0 20upx;
						width: 136upx;
						.main-title{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 14px;
							color: rgb(53, 53, 53);
						}
						.sub-heading{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 12px;
							color: rgb(50, 133, 255);
							margin-top: 6upx;
						}
					}
					.material-icon{
						width: 114upx;
						height: 86upx;
						display: inline-block;
						vertical-align: top;
						margin: 0 16upx 0 10upx;
						background-size: contain;
						background-position: center center;
						background-repeat: no-repeat;
					}
				}
		}
		
		//模块2
		.magic-style-three {
		    padding: 30upx 30upx 10upx 30upx;
			background: #fff;
			.magic-nav-icon {
			    width: 336upx;
			    height: 160upx;
			    display: inline-block;
			    vertical-align: top;
			    position: relative;
			    margin-bottom: 20upx;
			    border-radius: 6upx;
			    box-sizing: border-box;
			    border: 2upx solid transparent;
			    overflow: hidden;
				background: url(https://23627504.s61i.faiusr.com/4/AD0I8I2iCxAEGAAgnfqT9QUo57DPlwYw0AI41wI.png) center center / cover no-repeat, rgb(247, 248, 250);
			}
			.magic-nav-icon:nth-child(odd) {
			    margin-right: 18upx;
			}
			
			.flex-wrap {
			    z-index: 3;
			    position: absolute;
			    display: flex;
			    width: 100%;
			    height: 100%;
			    justify-content: space-around;
			    align-items: center;
			}
			.material-icon {
			    flex: 1 1;
			    width: 114upx;
			    height: 86upx;
			    display: inline-block;
			    vertical-align: top;
			    margin: 0 10upx;
			    color: #fff;
			    text-align: left;
			}
			.title-wrap{
				text-align: left;
				flex: 2 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: center;
				// align-items: center;
				margin: 0 0 0 20upx;
				width: 136upx;
				.main-title{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					 // word-break: break-all;
					font-size: 14px;
					color: rgb(53, 53, 53);
				}
				.sub-heading{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 12px;
					color: rgb(50, 133, 255);
					margin-top: 6upx;
				}
			}
		}
		//模块3
		.magic-style-four {
		    padding: 18upx 18upx 0 18upx;
			background: #fff;
			.magic-nav-icon {
			    margin-right: 14upx;
				width: 228upx;
				height: 172upx;
			    display: inline-block;
			    vertical-align: top;
			    position: relative;
			    margin-bottom: 20upx;
			    border-radius: 10upx;
			    box-sizing: border-box;
			    border: 2upx solid transparent;
			    overflow: hidden;
				background: url(https://23627504.s61i.faiusr.com/4/AD0I8I2iCxAEGAAgnfqT9QUo57DPlwYw0AI41wI.png) center center / cover no-repeat, rgb(247, 248, 250);
				.material-icon {
				    -webkit-box-flex: 1;
				    -ms-flex: 1;
				    flex: 1 1;
				    width: 16upx;
					height: 86upx;
				    color: #fff;
					margin-top: 10upx;
					padding: 20upx 0 14upx 0;
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;
				}
				.title-wrap{
					max-width: 100%;
					max-height: 39%;
					flex: 2 1;
					overflow: hidden;
					align-items: center;
					text-align: center;
					.main-title{
						font-size: 14px;
						color: rgb(53, 53, 53);
						margin-top: -10upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.nav-icon-bg {
			    -webkit-box-orient: vertical;
			    -webkit-box-direction: normal;
			    -ms-flex-direction: column;
			    flex-direction: column;
			    -webkit-box-pack: start;
			    -ms-flex-pack: start;
			    justify-content: flex-start;
			    margin: auto;
			    border-radius: unset;
			}
			.flex-wrap {
			    z-index: 3;
			    // position: absolute;
			    display: flex;
			    width: 100%;
			    height: 100%;
			    align-items: center;
			}
			.magic-nav-icon:nth-child(3n+3) {
			    margin-right: 0;
			}
		}
		//模块
		.magic-style-one{
			padding: 30upx;
			background: #fff;
			.icon0{
				width: 25%;
			}
			.icon1{
				width: 20%;
			}
			.nav-icon {
			    display: inline-block;
			    text-align: center;
			    position: relative;
			    vertical-align: top;
				.nav-icon-bg {
				    width: 90upx;
				    height: 90upx;
				    text-align: center;
				    margin: 0 auto;
				    margin-top: 10upx;
				    margin-bottom: 20upx;
				    border-radius: 50%;
				    position: relative;
					background: url(https://23627504.s61i.faiusr.com/4/AD0I8I2iCxAEGAAgnfqT9QUo57DPlwYw0AI41wI.png) center center / cover no-repeat, rgb(247, 248, 250);
				}
				.nav-icon-text {
				    font-size: 14px;
					color: rgb(53, 53, 53);
				    margin-bottom: 10upx;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 4;
				    -webkit-box-orient: vertical;
				    word-break: break-all;
				}
			}
		}
	}
</style>
